<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <th:block th:include="include :: header('统计')"/>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总</span>
                    <h5>营业收入</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${businessIncome}">0</h1>
                    <!--<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>-->
                    <!--</div>-->
                    <small>总营业收入</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">总</span>
                    <h5>订单数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${usedCount}"></h1>
                    <!--<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>-->
                    <!--</div>-->
                    <small>总订单数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>用户</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${addCountToday}">0</h1>
                    <!--<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>-->
                    <!--</div>-->
                    <small>今日新增用户</small>
                </div>
            </div>
        </div>
        <!--<div class="col-sm-3">-->
            <!--<div class="ibox float-e-margins">-->
                <!--<div class="ibox-title">-->
                    <!--<span class="label label-danger pull-right">总</span>-->
                    <!--<h5>总设备数</h5>-->
                <!--</div>-->
                <!--<div class="ibox-content">-->
                    <!--<h1 class="no-margins" th:text="${addCountToday}">0</h1>-->
                    <!--<small>总设备数</small>-->
                    <!--<button type="button" class="btn btn-outline btn-success allDev">查看详情</button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>


    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总</span>
                    <h5>总设备数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${allDevs}">0</h1>
                    <small>总设备数</small>
                    <button type="button" class="btn btn-outline btn-success allDev">查看详情</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <ul class="stat-list">
                                <!--<li>-->
                                <!--<h2 class="no-margins">2,346</h2>-->
                                <!--<small>订单总数</small>-->
                                <!--<div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>-->
                                <!--</div>-->
                                <!--<div class="progress progress-mini">-->
                                <!--<div style="width: 48%;" class="progress-bar"></div>-->
                                <!--</div>-->
                                <!--</li>-->
                                <li>
                                    <h2 class="no-margins" th:text="${mouthCount}">0</h2>
                                    <small>最近一个月订单量</small>
                                    <!--<div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>-->
                                    <!--</div>-->
                                    <!--<div class="progress progress-mini">-->
                                    <!--<div style="width: 60%;" class="progress-bar"></div>-->
                                    <!--</div>-->
                                </li>
                                <li>
                                    <h2 class="no-margins" th:text="${mouthIncome}">0</h2>
                                    <small>最近一个月营业额</small>
                                    <!--<div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>-->
                                    <!--</div>-->
                                    <!--<div class="progress progress-mini">-->
                                    <!--<div style="width: 22%;" class="progress-bar"></div>-->
                                    <!--</div>-->
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>合作商营业收入TOP6</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <th>合作商姓名</th>
                            <th>分润比例</th>
                            <th>直营营业额</th>
                            <th>下级营业额</th>
                        </tr>
                        </thead>
                        <tbody class="tbody_data">
                        <!--<tr>-->
                        <!--<td>-->
                        <!--<small>进行中...</small>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 11:20</td>-->
                        <!--<td>青衣5858</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 24%</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                        <!--<td><span class="label label-warning">已取消</span>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 10:40</td>-->
                        <!--<td>徐子崴</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                        <!--<td>-->
                        <!--<small>进行中...</small>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 01:30</td>-->
                        <!--<td>姜岚昕</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 54%</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                        <!--<td>-->
                        <!--<small>进行中...</small>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 02:20</td>-->
                        <!--<td>武汉大兵哥</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 12%</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                        <!--<td>-->
                        <!--<small>进行中...</small>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 09:40</td>-->
                        <!--<td>荆莹儿</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 22%</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                        <!--<td><span class="label label-primary">已完成</span>-->
                        <!--</td>-->
                        <!--<td><i class="fa fa-clock-o"></i> 04:10</td>-->
                        <!--<td>栾某某</td>-->
                        <!--<td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>-->
                        <!--</tr>-->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script th:src="@{/js/bootstrap.min.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    $(document).ready(function () {
            var ctx = [[@{/}]];
            var prefix = ctx + "statistics";
            var url = prefix + "/chart";
            $.ajax({
                url: url,
                dataType: "json",
                data: {},
                type: "POST",
                success: function (result) {
                    // alert(JSON.stringify(result))


                    // var data2 = [
                    //     [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
                    //     [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
                    //     [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
                    //     [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
                    //     [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
                    //     [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
                    //     [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
                    //     [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
                    // ];
                    //
                    // var data3 = [
                    //     [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
                    //     [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
                    //     [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
                    //     [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
                    //     [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
                    //     [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
                    //     [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
                    //     [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
                    // ];


                    // console.log(result.turnover);
                    // console.log(result.usedCounts);
                    var data3 = eval(result.turnover);
                    var data2 = eval(result.usedCounts);

                    var dataset = [
                        {
                            label: "营业额",
                            data: data3,
                            color: "#1ab394",
                            // bars: {
                            //     show: true,
                            //     align: "center",
                            //     barWidth: 24 * 60 * 60 * 600,
                            //     lineWidth: 0
                            // }
                            lines: {
                                lineWidth: 1,
                                show: true,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.2
                                    }, {
                                        opacity: 0.2
                                    }]
                                }
                            },
                            splines: {
                                show: false,
                                tension: 0.6,
                                lineWidth: 1,
                                fill: 0.1
                            },

                        }, {
                            label: "订单数",
                            data: data2,
                            yaxis: 2,
                            color: "#464f88",
                            lines: {
                                lineWidth: 1,
                                show: true,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.2
                                    }, {
                                        opacity: 0.2
                                    }]
                                }
                            },
                            splines: {
                                show: false,
                                tension: 0.6,
                                lineWidth: 1,
                                fill: 0.1
                            },
                        }
                    ];


                    var options = {
                        xaxis: {
                            mode: "time",
                            tickSize: [3, "day"],
                            tickLength: 0,
                            axisLabel: "Date",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: 'Arial',
                            axisLabelPadding: 10,
                            color: "#838383"
                        },
                        yaxes: [{
                            position: "left",
                            max: result.zbz,
                            color: "#838383",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: 'Arial',
                            axisLabelPadding: 3
                        }, {
                            max: result.ybz,
                            position: "right",
                            clolor: "#838383",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: ' Arial',
                            axisLabelPadding: 67
                        }
                        ],
                        legend: {
                            noColumns: 1,
                            labelBoxBorderColor: "#000000",
                            position: "nw"
                        },
                        grid: {
                            hoverable: false,
                            borderWidth: 0,
                            color: '#838383'
                        }
                    };

                    function gd(year, month, day) {
                        return new Date(year, month - 1, day).getTime();
                    }

                    var previousPoint = null,
                        previousLabel = null;

                    $.plot($("#flot-dashboard-chart"), dataset, options);
                }
            });


            // 请求后台接口获取对应的数据
            // $.modal.loading("数据加载中");

            var prefix = ctx + "system/partner";
            var url = prefix + "/partnerTop6";
            $.ajax({
                url: url,
                dataType: "json",
                data: {},
                type: "POST",
                success: function (result) {
                    // alert(JSON.stringify(result));
                    // $.modal.closeLoading();
                    var str = "";
                    var data = result;
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            str += "<tr>\n" +
                                "                            <td>\n" +
                                "                                <small>" + data[i].fullName + "</small>\n" +
                                "                            </td>\n" +
                                "                            <td>" + data[i].shareRatio + "</td>\n" +
                                "                            <td>" + data[i].directTurnover + "</td>\n" +
                                "                            <td>" + data[i].juniorTurnover + "</td>\n" +
                                "                        </tr>";
                        }
                        $(".tbody_data").append(str);
                    }
                }
            });

            $(".allDev").click(function () {
                // 点击总设备数设备
                var prefix = ctx + "system/device";
                var url = prefix + '/devAnalysis';
                var width = null;
                var height = null;
                width = 1200;
                height = 660;
                layer.open({
                    type: 2,
                    area: [width + 'px', height + 'px'],
                    fix: false,
                    maxmin: true,
                    shade: 0.3,
                    title: "设备详情",
                    content: url,
                    btn: ['关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    cancel: function (index) {
                        return true;
                    }
                });
            });
        }
    );
</script>
</body>
</html>
